<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

    <head>
        <title>Realtime web chat</title>
        <meta http-equiv="Content-Type"
              content="text/html; charset=UTF-8; width=device-width; initial-scale=1.0"
              name="viewport"/>
        <link rel="stylesheet" type="text/css" media="all" href="assets/lib/bootstrap/css/bootstrap.css"
              th:href="@{assets/lib/bootstrap/css/bootstrap.css}" />
        <link rel="stylesheet" type="text/css" media="all" href="assets/common/main.css"
              th:href="@{assets/common/main.css}" />

        <script th:src="@{assets/lib/jquery/jquery.js}"></script>-->

    </head>


    <body>

    <div class='container'>

        <div class='block'>


            <div class='devise_page'>

                <div class='signup_page'>


                    <form class="form-signin" accept-charset="UTF-8" action="signup"
                          method="post" th:object="${user}">

                        <div class='right'>
                            <a href="login">
                                <span th:utext="#{signup.login}">Login</span>
                            </a>
                        </div>
                        <h3 class="muted form-signin-heading" th:utext="#{signin.header}">Sign up for free:</h3>
                        <div class="control-group">
                            <div class="controls">
                                <input class="input-block-level form-control" id="first_name" th:field="*{firstName}" size="30" type="text"  value="" required="required"
                                       th:placeholder="#{signin.input.firstname.placeholder}" />
                                <p class="error" th:each="err : ${#fields.errors('firstName')}" th:text="${err}" />
                            </div>
                        </div>

                        <div class="control-group">
                            <div class="controls">
                                <input class="input-block-level form-control" id="last_name" th:field="*{lastName}" size="30" type="text" value=""
                                    th:placeholder="#{signin.input.lastname.placeholder}" required="required"/>
                                <p class="error" th:each="err : ${#fields.errors('lastName')}" th:text="${err}" />
                            </div>
                        </div>
                        <div class="control-group">
                            <div class="controls">
                                <input class="input-block-level form-control" id="user_email" th:field="*{userName}" size="30" type="email"  value=""
                                    th:placeholder="#{signin.input.email.placeholder}" required="required"/>
                                <p class="error" th:each="err : ${#fields.errors('userName')}" th:text="${err}" />
                            </div>
                        </div>
                        <div class="control-group">
                            <div class="controls">
                                <input class="input-block-level form-control" id="user_password" th:field="*{password}" size="30" type="password" value=""
                                    th:placeholder="#{signin.input.password.placeholder}" required="required"/>
                                <p class="error" th:each="err : ${#fields.errors('password')}" th:text="${err}" />
                            </div>
                        </div>
                        <hr/>
                        <div class="agree_rules">
                            <input id="agree_rules" name="agree_rules" type="checkbox" value="1"/>
                            <span th:utext="#{signup.agree.txt1}">I accept the</span>
                            <a href="info/agreement">
                                <span th:utext="#{signup.agree.txt2}">user agreement.</span>
                            </a>
                        </div>

                        <div class='buttons'>
                            <input class="btn btn-primary" disabled="disabled" id="submit_form" name="commit" type="submit" th:value="#{signin.submit.button}" />
                        </div>
                    </form>

                </div>


            </div>
            <script>

                $(document).ready(function(){
                    $('#agree_rules').change(function(){
                        $('#submit_form').attr('disabled', !$(this).attr('checked') )
                    })
                });

            </script>

        </div>
        <div class='block_shadow'></div>
    </div>



    </body>
</html>